import React, { Component } from "react";
import "./index.css";
import Header from "../Header";
import Main from "../Main";
import Footer from "../Footer";
import { nanoid } from 'nanoid';

export default class Todo extends Component {
    state = {
        todos: [
            // '1 买菜 未完成'
            { id: 1, title: "买菜", done: false },
            { id: 2, title: "随礼", done: true },
            { id: 3, title: "约会", done: true },
            { id: 4, title: "打球", done: true },
        ],
    };

    render() {
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo} />
                    <Main todos={this.state.todos} checkTodo={this.checkTodo} removeTodo={this.removeTodo} />
                    <Footer removeDoneTodo={this.removeDoneTodo} checkAllTodo={this.checkAllTodo} todos={this.state.todos} />
                </div>
            </div>
        );
    }

    //声明方法新增任务
    addTodo = (title) => {
        //获取 todo 数组
        let { todos } = this.state;
        //根据任务名称生成一个对象
        let obj = { title: title, done: false, id: nanoid()};
        //将新对象压入到 todos 数组中
        let newTodos = [...todos, obj];
        //设置
        this.setState({
            todos: newTodos,
        });
    };

    //声明方法修改任务的状态
    checkTodo = (id, status) => {
        //获取 todos 数组
        let { todos } = this.state;
        //修改制定 id 的状态
        let newTodos = todos.map((item) => {
            //判断  如果当前的任务 id 与要修改的 id 相同, 则修改状态
            if (item.id === id) {
                item.done = status;
            }
            return item;
        });
        //设置
        this.setState({
            todos: newTodos,
        });
    };

    //声明方法 删除某一个任务
    removeTodo = (id) => {
        let { todos } = this.state;
        //过滤数据
        // let newTodos = todos.filter((item) => {
        //     if (item.id === id) return false;
        //     return true;
        // });
        let newTodos = todos.filter(item => item.id !== id);
        //设置
        this.setState({
            todos: newTodos,
        });
    };

    //声明方法 修改所有任务的状态
    checkAllTodo = (status) => {
        //获取所有的任务
        let {todos} = this.state;
        //修改所有的状态
        let newTodos = todos.map(item => {
            item.done = status;
            return item;
        });
        //设置 todos 的值
        this.setState({
            todos: newTodos
        })
    }
    
    //声明方法
    removeDoneTodo = () => {
        let {todos} = this.state;
        //过滤
        let newTodos = todos.filter(item => !item.done);
        //设置
        this.setState({
            todos: newTodos
        })
    }

    //组件挂载完毕 钩子
    componentDidMount() {
        //测试新增方法是否可用
        // this.addTodo('约会')
        //测试 checkTodo 方法
        // setTimeout(() => {
        //     this.checkTodo(2, false);
        // }, 2000)
        //测试删除某个任务
        // setTimeout(() => {
        //     this.removeTodo(2);
        // }, 2000);
        //测试修改所有任务的状态
        // this.checkAllTodo(false);
        //测试删除已经完成的任务
        // this.removeDoneTodo();
    }
}
